<!doctype html>
 <!-- Note that chrome://flags is intentionally not a translated UI surface, -->
 <!-- so don't mark it with direction or language attributes. -->
<html>
<head>
<meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<if expr="not is_ios">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
</if>
<title>$i18n{title}</title>

<link rel="stylesheet" href="flags.css">
<if expr="lacros or chromeos">
  <link rel="stylesheet" href="chrome://resources/css/os_header.css">
</if>

<if expr="is_ios">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
</if>

</head>
<body>
<div id="header">
  <div class="flex-container">
    <div class="flex">
      <div class="search-container">
        <input type="text" id="search"
               aria-label="$i18n{search-label}"
               placeholder="$i18n{search-placeholder}" tabindex="1"
               autocomplete="off" spellcheck="false">
        <input type="button" class="clear-search" title="$i18n{clear-search}"
            tabindex="2">
      </div>
    </div>
    <div class="flex">
      <button id="experiment-reset-all" type="button" tabindex="3">
          $i18n{reset}
      </button>
    </div>
  </div>
  <div class="screen-reader-only" id="screen-reader-status-message" role="status"></div>
</div>
<div id="body-container" style="visibility:hidden">
  <div id="flagsTemplate">
<if expr="lacros or chromeos">
    <div class="os-link-container" id="os-link-container">
      <span id="os-flags-link-container" class="os-link-icon"></span>
      <span aria-hidden="true" id="os-link-desc">$i18n{os-flags-text1}</span>
      <a href="#" id="os-link-href" tabindex="4" aria-describedby="os-link-desc">
        $i18n{os-flags-link}
      </a>
      <span aria-hidden="true">$i18n{os-flags-text2}</span>
    </div>
</if>

    <div class="flex-container">
      <div class="flex"><h1 class="section-header-title">$i18n{heading}</h1></div>
      <span id="version" class="flex">$i18n{version}</span>
    </div>
    <div class="blurb-container">
      <span class="blurb-warning">$i18n{page-warning}</span>
      <span>$i18n{page-warning-explanation}</span>
<if expr="chromeos">
      <p id="owner-warning">$i18n{owner-warning}</p>
</if>
    </div>
    <p id="promos" hidden>
      <!-- Those strings are not localized because they only appear in
           chrome://flags, which is not localized. -->
      <span id="channel-promo-beta" hidden>
        Interested in cool new Chrome features? Try our
        <a href="https://chrome.com/beta">beta channel</a>.
      </span>
      <span id="channel-promo-dev" hidden>
        Interested in cool new Chrome features? Try our
        <a href="https://chrome.com/dev">dev channel</a>
      </span>
    </p>
    <ul class="tabs" role="tablist">
      <li class="selected" role="tab">
        <a href="#tab-content-available" id="tab-available" class="tab" role="tab"
            aria-selected="true"
            aria-controls="panel1"
            tabindex="5">$i18n{available}</a>
      </li>
<!-- Unsupported experiments are not shown on iOS -->
<if expr="not is_ios">
      <li role="tab">
        <a href="#tab-content-unavailable" id="tab-unavailable" class="tab" role="tab"
           aria-selected="false" aria-controls="panel2"
           tabindex="6">$i18n{unavailable}</a>
      </li>
</if>
    </ul>
    <div id="tabpanels">
      <div id="tab-content-available" class="tab-content selected"
          role="tabpanel" aria-labelledby="tab-available" aria-hidden="false">
      </div>
      <div id="tab-content-available-template" class="template hidden">
        <!-- Non default experiments. -->
        <div jsselect="supportedFeatures"
            jsvalues="id:internal_name; class: is_default ? 'hidden' : 'experiment'"
            jsdisplay="!is_default">
          <div class="experiment-default"
              jsvalues="class: is_default ? 'experiment-default flex-container'
                  : 'experiment-switched flex-container'">
            <div class="flex">
              <h3 class="experiment-name" jscontent="name"
                  jsvalues="title: is_default ? '' : '$i18n{experiment-enabled}';
                      id:internal_name + '_name'"></h3>
              <p>
                <span jsvalues=".textContent:description"></span> –
                <span class="platforms" jscontent="supported_platforms.join(', ')"></span>
              </p>
              <div jsdisplay="origin_list_value!==null">
                <textarea class="experiment-origin-list-value"
                    jsvalues=".internal_name:internal_name; .value:origin_list_value;
                        aria-labelledby:internal_name + '_name'"
                    tabindex="7"></textarea>
              </div>
              <a class="permalink" jsvalues="href: '#' + internal_name"
                  jscontent="'#' + internal_name" tabindex="7"></a>
            </div>
            <div class="flex experiment-actions">
              <div jsdisplay="options && options.length > 0">
                <select class="experiment-select" tabindex="7"
                    jsvalues=".internal_name:internal_name;.disabled:!enabled;
                        aria-labelledby:internal_name + '_name'">
                  <option jsvalues=".selected:selected;"
                      jsselect="options"
                      jscontent="description">
                  </option>
                </select>
              </div>
              <select class="experiment-enable-disable" tabindex="7"
                  jsdisplay="enabled !== undefined"
                  jsvalues=".internal_name:internal_name;
                      aria-labelledby:internal_name + '_name'">
                <option jsvalues=".selected:!enabled; data-default: enabled ? 1 : 0"
                    value="disabled">$i18n{disabled}</option>
                <option jsvalues=".selected:enabled; data-default: !enabled ? 1 : 0"
                    value="enabled">$i18n{enabled}</option>
              </select>
            </div>
          </div>
        </div>
        <!-- Experiments with default settings. -->
        <div class="experiment" jsselect="supportedFeatures"
            jsvalues="id:internal_name; class: is_default ? 'experiment' : 'hidden'"
            jsdisplay="is_default">
          <div class="experiment-default"
              jsvalues="class: is_default ? 'experiment-default flex-container'
                  : 'experiment-switched flex-container'">
            <div class="flex">
              <h3 class="experiment-name" jscontent="name"
                  jsvalues="title: is_default ? '' : '$i18n{experiment-enabled}';
                      id:internal_name + '_name'"></h3>
              <p>
                <span jsvalues=".textContent:description"></span> –
                <span class="platforms" jscontent="supported_platforms.join(', ')"></span>
              </p>
              <div jsdisplay="origin_list_value!==null">
                <textarea class="experiment-origin-list-value"
                    jsvalues=".internal_name:internal_name; .value:origin_list_value;
                        aria-labelledby:internal_name + '_name'"
                    tabindex="7"></textarea>
              </div>
              <a class="permalink" jsvalues="href: '#' + internal_name"
                  jscontent="'#' + internal_name" tabindex="7"></a>
            </div>
            <div class="flex experiment-actions">
              <div jsdisplay="options && options.length > 0">
                <select class="experiment-select" tabindex="7"
                    jsvalues=".internal_name:internal_name;.disabled:!enabled;
                        aria-labelledby:internal_name + '_name'">
                  <option jsvalues=".selected:selected;"
                      jsselect="options"
                      jscontent="description">
                  </option>
                </select>
              </div>
              <!-- Represent enabled / disabled options in a drop down -->
              <select class="experiment-enable-disable" tabindex="7"
                  jsdisplay="enabled !== undefined"
                  jsvalues=".internal_name:internal_name;
                      aria-labelledby:internal_name + '_name'">
                <option jsvalues=".selected:!enabled; data-default:!enabled ? 1 : 0"
                    value="disabled">$i18n{disabled}</option>
                <option jsvalues=".selected:enabled; data-default: enabled ? 1 : 0"
                    value="enabled">$i18n{enabled}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="no-match hidden" role="alert">$i18n{no-results}</div>
      </div>
<if expr="not is_ios">
      <div id="tab-content-unavailable" class="tab-content"
          role="tabpanel" aria-labelledby="tab-unavailable" aria-hidden="false">
        <div class="experiment"
            jsselect="unsupportedFeatures"
            jsvalues="id:internal_name">
          <div class="experiment-default flex-container"
              jsvalues="class: is_default ? 'experiment-default flex-container'
                  : 'experiment-switched flex-container'">
            <div class="flex">
              <h3 class="experiment-name"
                  jscontent="name"></h3>
              <p>
                <span jsvalues=".textContent:description"></span>
                <span class="platforms" jscontent="supported_platforms.join(', ')"></span>
              </p>
              <a class="permalink"
                  jsvalues="href: '#' + internal_name"
                  jscontent="'#' + internal_name" tabindex="9"></a>
            </div>
            <div class="flex experiment-actions">$i18n{not-available-platform}</div>
          </div>
        </div>
        <div class="no-match hidden" role="alert">
          $i18n{no-results}
        </div>
      </div>
</if>
    </div>
    <div id="needs-restart" jsvalues="class:needsRestart ? 'show' : ''">
      <div class="flex-container">
        <div class="flex restart-notice" jstcache="0">$i18n{flagsRestartNotice}</div>
        <div class="flex">
<if expr="not is_ios">
          <button id="experiment-restart-button" class="primary" tabindex="-1">
            $i18n{relaunch}
          </button>
</if>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="module" src="flags.js"></script>
</body>
</html>
